<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>拼图小游戏</title>
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
      canvas {
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    var img = new Image();
    img.src = "./background/big.jpg";
    var canvas = document.getElementById("canvas");
    canvas.width = "600";
    canvas.height = "445";
    var ctx = canvas.getContext("2d");

    var matrix = [
      [0, 1, 2, 3, 4, 30],
      [6, 7, 8, 9, 10, 11],
      [12, 13, 14, 15, 16, 17],
      [18, 19, 20, 21, 22, 23],
      [24, 25, 26, 27, 28, 29],
    ];

    var whiteBlock = {
      row: 0,
      col: 5,
    };

    var drawline = function () {
      ctx.beginPath();
      for (var i = 0; i < 7; i++) {
        ctx.moveTo(i * 100, 0);
        ctx.lineTo(i * 100, 445);
        ctx.moveTo(0, i * 89);
        ctx.lineTo(600, i * 89);
      }
      ctx.stroke();
    };

    var perfect = function () {
      ctx.font = "60px Comic Sans MS";
      ctx.fillStyle = "Orange";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText("Perfect", 300, 250);
      ctx.fillStyle = "Black";
    };

    var drawPic = function () {
      ctx.clearRect(0, 0, 600, 500);
      for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 6; j++) {
          if (matrix[i][j] != 30) {
            var col = Math.floor(matrix[i][j] % 6) * 100;
            var row = Math.floor(matrix[i][j] / 6) * 89;
            ctx.drawImage(img, col, row, 100, 89, j * 100, i * 89, 100, 89);
          }
        }
      }
      if (checkPic()) {
        perfect();
      } else {
        drawline();
      }
    };

    var moveLeft = function () {
      if (whiteBlock.col != 5) {
        matrix[whiteBlock.row][whiteBlock.col] =
          matrix[whiteBlock.row][whiteBlock.col + 1];
        whiteBlock.col = whiteBlock.col + 1;
        matrix[whiteBlock.row][whiteBlock.col] = 30;
      }
    };

    var moveUp = function () {
      if (whiteBlock.row != 4) {
        matrix[whiteBlock.row][whiteBlock.col] =
          matrix[whiteBlock.row + 1][whiteBlock.col];
        whiteBlock.row = whiteBlock.row + 1;
        matrix[whiteBlock.row][whiteBlock.col] = 30;
      }
    };

    var moveRight = function () {
      if (whiteBlock.col != 0) {
        matrix[whiteBlock.row][whiteBlock.col] =
          matrix[whiteBlock.row][whiteBlock.col - 1];
        whiteBlock.col = whiteBlock.col - 1;
        matrix[whiteBlock.row][whiteBlock.col] = 30;
      }
    };

    var moveDown = function () {
      if (whiteBlock.row != 0) {
        matrix[whiteBlock.row][whiteBlock.col] =
          matrix[whiteBlock.row - 1][whiteBlock.col];
        whiteBlock.row = whiteBlock.row - 1;
        matrix[whiteBlock.row][whiteBlock.col] = 30;
      }
    };

    while (true) {
      var dirction = Math.floor(Math.random() * 4);
      switch (dirction) {
        case 0:
          moveUp();
          break;
        case 1:
          moveLeft();
          break;
        case 2:
          moveRight();
          break;
        case 3:
          moveDown();
          break;
        default:
          break;
      }
      if (whiteBlock.row == 4 && whiteBlock.col == 0) break;
    }

    var checkPic = function () {
      for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 6; j++) {
          if (i * 6 + j != matrix[i][j] && i * 6 + j != 5) return 0;
        }
      }
      return 1;
    };

    $("body").keydown(function (event) {
      if (event.keyCode == 37) moveRight();
      if (event.keyCode == 38) moveDown();
      if (event.keyCode == 39) moveLeft();
      if (event.keyCode == 40) moveUp();
      drawPic();
    });

    img.onload = function () {
      drawPic();
    };
  </script>
</html>
